<template>
  <div>
    <InputDialog ref="setDynamicFieldDialog"
                 :value="crtField.name"
                 label="字段名称"
                 title="设置动态字段名称" @callback="setDynamicFieldCallBack"/>
    <KUF2KFMapDialog ref="kUF2KFMapDialog" :crtField="crtField"
                     @setMatchingFieldCallBack="setMatchingFieldCallBack"/>
    <CustomTag2KFDialog ref="CustomTag2KFDialog" :crtField="crtField"
                     @setMatchingFieldCallBack="setMatchingFieldCallBack"/>
    <el-row>
      <el-col>
        <el-button icon="el-icon-back"
                   size="small"
                   type="text"
                   @click="$router.go(-1)">返回</el-button>
        <span> | 新建子任务 </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-col style="font-size: 24px; ">
            <div class="titleClass"></div>
            <div style="display: inline">素材字段对应关系</div>
          </el-col>
        </el-row>
        <!-- 第一个字段为名称, 无需指定 -->
        <el-table ref="knowledgeUnit2KnowledgeTable"
                  :data='editingKnowledge.knowledgeUnitFieldList'
                  :height="tableHeight"
                  stripe border>
          <el-table-column label="素材字段" min-width="100">
            <template slot-scope="scope">
              <el-link @click.prevent="selectKnowledgeUnitField(scope.$index)" v-html="scope.row.name"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <!-- 已匹配字段不能再次匹配 -->
              <span><el-link type="primary" @click.prevent="setMatchingField(scope.row)">匹配字段</el-link></span>
              <!-- 目前, 知识单元字段名称和知识名称完全匹配的可以解绑, 修改为动态字段 -->
              <span><el-link type="primary" @click.prevent="setDynamicField(scope.row)">设置动态字段</el-link></span>
              <!-- 舍弃, 以匹配字段, 不想要这部分内容 -->
              <span><el-link type="danger" @click.prevent="abandonField(scope.row)">舍弃</el-link></span>
            </template>
          </el-table-column>
          <el-table-column label="知识字段" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="UTIL.isNotEmpty(scope.row.knowledgeLibFieldId) || UTIL.isNotEmpty(scope.row.knowledgeLibFieldIdDefault)" style="color: green">(固定)</span>
              <span v-else-if="UTIL.isNotEmpty(scope.row.knowledgeLibFieldName) || UTIL.isNotEmpty(scope.row.knowledgeLibFieldNameDefault)" style="color: red">(动态)</span>
              <span v-html="scope.row.knowledgeLibFieldName || scope.row.knowledgeLibFieldNameDefault"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col style="font-size: 24px; ">
            <div class="titleClass" style="margin-left: 10px; "></div>
            <div style="display: inline">素材: {{ editingKnowledge.knowledgeUnitName }}</div>
          </el-col>
        </el-row>
        <div id="knowledgeUnitContent" :style="{height: tableHeight + 'px', overflow: 'auto', marginLeft: '15px' }">
          <div :id="'knowledgeUnitFieldContent' + idx" v-for="(knowledgeUnitField, idx) in editingKnowledge.knowledgeUnitFieldList">
            <div style="font-size: 22px; line-height: 40px; " v-html="knowledgeUnitField.name"></div>
            <div style="overflow: auto; background-color: #F0F8F8;">
              <div style="margin: 10px; " v-html="knowledgeUnitField.content"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col style="font-size: 24px; ">
            <div class="titleClass" style="margin-left: 20px; "></div>
            <div style="display: inline">知识预览</div>
          </el-col>
        </el-row>
        <KnowledgeDetail :key="forceUpdateKey" ref="knowledgeDetail"
                         :knowledgeId="$store.state.knowledgeDetailId"
                         :knowledgeStatus="$store.state.knowledgeDetailStatus"
                         :parentHeight="tableHeight"
                         :menuDisplayFlag="false"
                         :emptyFieldDisplayFlag="false"/>
      </el-col>
    </el-row>
    <el-row v-if="createTaskItemType === 'single'" style="float: right; margin-right: 10px; ">
      <el-button size="small" @click="insertTaskItem" type="primary">确 定</el-button>
    </el-row>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import KnowledgeDetail from '../KnowledgeDetail/KnowledgeDetail'
  import KUF2KFMapDialog from './KUF2KFMapDialog'
  import InputDialog from "../common/InputDialog"
  import CustomTag2KFDialog from "./CustomTag2KFDialog";
  export default {
    name: "CreateKnowledgeByKnowledgeUnit",
    components: {InputDialog, KnowledgeDetail, KUF2KFMapDialog, CustomTag2KFDialog},
    data(){
      return {
        tableHeight: 0,
        crtField: {}
      }
    },
    computed: {
      ...mapState(['forceUpdateKey', 'knowledgeList', 'editingKnowledge', 'createTaskItemType', 'knowledgeLibFieldList']),
    },
    methods: {
      selectKnowledgeUnitField(idx) {
        let scrollTop = document.getElementById("knowledgeUnitFieldContent" + idx).offsetTop - 32
        document.getElementById("knowledgeUnitContent").scrollTop = scrollTop
      },
      setKnowledgeLibFieldIdAndName(id, name) {
        this.crtField.knowledgeLibFieldId = id
        this.crtField.knowledgeLibFieldName = name
        this.crtField.knowledgeLibFieldIdDefault = id
        this.crtField.knowledgeLibFieldNameDefault = name
      },
      insertTaskItem() {
        let knowledge = this.editingKnowledge
        this.axios.post('/pmph/action/knowledgeUnit/insertKnowledge',
          {knowledge,
          taskItem: this.$store.state.taskItem,
          knowledgeLibFieldList: this.knowledgeLibFieldList}).then(() => {
          this.$router.go(-1)
        })
      },
      setMatchingField(field) {
        this.crtField = field
        // 考虑自由标签;
        if (field.name === CONST.KNOWLEDGE_UNIT_FIELD_CUSTOM_TAG_KEY) {
          if (this.knowledgeLibFieldList.filter(item => item.kind === CONST.FIELD_KIND_MULTI_VALUE_INPUT).length === 0) {
            this.$message.warning("没有多值类型字段, 不能匹配固定字段")
            return
          }
          else {
            this.$refs.CustomTag2KFDialog.visible = true
            return
          }
        }
        this.$refs.kUF2KFMapDialog.visible = true
      },
      setMatchingFieldCallBack(matchingField) {
        this.setKnowledgeLibFieldIdAndName(matchingField.id, matchingField.name)
        this.selectKnowledgeFieldByUnitFieldList()
      },
      selectKnowledgeFieldByUnitFieldList() {
        this.axios.post('/pmph/action/knowledgeUnit/selectKnowledgeFieldByUnitFieldList', this.editingKnowledge)
          .then((response) => {
            // store knowledgeList, 替换;
            this.knowledgeList[this.knowledgeList.indexOf(this.editingKnowledge)] = response.data
            this.$store.commit('setEditingKnowledge', response.data)
            this.$store.commit('forceUpdate')
        })
      },
      setDynamicField(field) {
        this.crtField = field
        this.$refs.setDynamicFieldDialog.visible = true
      },
      setDynamicFieldCallBack(name) {
        //查看名称是否与库字段名称重复;
        for (let knowledgeLibField of this.knowledgeLibFieldList) {
          if (knowledgeLibField.name === name) {
            this.$message.warning('已存在重名固定字段, 请重新设置动态字段名称')
            return
          }
        }
        this.setKnowledgeLibFieldIdAndName('', name)
        this.selectKnowledgeFieldByUnitFieldList()
      },
      abandonField(field) {
        this.crtField = field
        this.setKnowledgeLibFieldIdAndName('', '')
        this.selectKnowledgeFieldByUnitFieldList()
      }
    },
    created() {
      if (this.createTaskItemType === 'single') {
        this.tableHeight = CONST.WORKSPACE_HEIGHT - 125
      }
      else {
        this.tableHeight = CONST.WORKSPACE_HEIGHT - 85
      }
    }
  }
</script>

<style scoped>
  .titleClass {
    width: 10px;
    height: 30px;
    background-color: green;
    border-radius: 5px;
    display: inline-block;
    vertical-align: bottom;
  }
</style>
